---
id: alert
title: Alert
---

import Playground from '@theme/Playground';

## Colors

### Primary

<Playground>
  <div class="alert alert--primary" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is a <strong>primary</strong> alert. You should probably pay attention to
    it.
  </div>
</Playground>

### Secondary

<Playground>
  <div class="alert alert--secondary" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is a <strong>secondary</strong> alert. It's not too important, you may ignore
    it.
  </div>
</Playground>

### Success

<Playground>
  <div class="alert alert--success" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is a <strong>success</strong> alert. Something good must have happened!
  </div>
</Playground>

### Info

<Playground>
  <div class="alert alert--info" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is an <strong>info</strong> alert. For your information only.
  </div>
</Playground>

### Warning

<Playground>
  <div class="alert alert--warning" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is a <strong>warning</strong> alert. Be warned, you should pay attention!
  </div>
</Playground>

### Danger

<Playground>
  <div class="alert alert--danger" role="alert">
    <button aria-label="Close" class="close" type="button">
      <span aria-hidden="true">&times;</span>
    </button>
    This is a <strong>danger</strong> alert. Something has gone wrong, please investigate!
  </div>
</Playground>
